前言

上一篇分享給大家圖片處理的一些方式，這篇會教大家如何使用堆疊來排版。
堆疊的使用是很重要的，好的堆疊架構能使排版更有效率。
文章後半會提到ScrollView的使用，可以呈現圖片或是一些文字段落等等。

新增 View（頁面）

這邊先帶給大家一個小教學--新增頁面，當你有其他頁面要寫時就會用到。

以下是建立新的 SwiftUI View 步驟：
New > File... > ios-SwiftUI View

命名新的 view

完成後按 create 就 ok 了。可以透過左方的欄位來選擇要編輯的 View。

不同 Stack 的使用｜HStack、VStack、ZStack

當使用兩個以上的元件時，就需要用到 Stack ，否則 Canvas 中的預覽畫面會分成兩個以上的畫面。
如下圖：

這時只要使用 Stack 將他包在一起。
以下是幾種不同的 Stack :

HStack{元件}//水平
VStack{元件}//垂直
ZStack{元件}//前後

可以將原本寫好的物件包到 stack 中：
按著 cmd 並點選物件 > 選擇 Embed in...stack
物件外就會有 stack 架構出現。

HStack 效果

將元件水平排列

VStack 效果

將元件垂直排列

ZStack 效果

將元件前後排列，這邊用隨意的文字讓大家看出效果。
可以利用 .offset 來調整位置是很方便的。

可以做成像海報的樣式。

那 stack 的部分大概是這樣啦～
p.s. stack 可以一層包一層。

stack 延伸文章

stack 排版
stack 排版

ScrollView

當我們的文字或是圖片等等的已經排滿畫面，並希望我們能向下滑時，就會用到 ScrollView 。

ScrollView 官方文件

Scroll View

A scrollable view.
可以捲動的頁面/畫面

垂直方向滾動

ScrollView {
    ForEach(1..<50) { index in
        Text("\(index)")
    }
}.font(.largeTitle)  

這邊預設是垂直滾動

水平方向滾動

加上 .horizontal 跟 HStack

ScrollView(.horizontal){
    HStack {
        ForEach(1..<50) { index in
            Text("\(index)")
        }
    }
}.font(.largeTitle)  

兩個方向都可以滾動

在 ScrollView 後面加上（屬性）。
如下：

ScrollView([.horizontal, .vertical])

隱藏滾動條

在滾動時不會出現灰色的滾動條。

ScrollView([.horizontal, .vertical],showsIndicators: false)

今天的學習筆記就到這邊啦～
祝大家有個美好的一天！